<template>
  <div class="certification-wrapper">
    <Dialog ref="dialog" :title="title" class="dialog" @closeDialog="handleCloseDialog">
      <div class="avatar-wrapper">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="上传凭证：" prop="img">
            <el-upload
              :limit="1"
              action="https://wx.chengkenet.com/api/common/upload/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
            >
              <i class="el-icon-plus" />
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="ruleForm.img" alt="">
            </el-dialog>
          </el-form-item>
        </el-form>
      </div>
    </Dialog>
  </div>
</template>
<script>
import Dialog from '@/common/dialog'
const Err_OK = 200
export default {
  components: {
    Dialog
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      title: '查看凭证',
      imgUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      ruleForm: {
        img: ''
      }
    }
  },
  methods: {
    clear() {
      this.ruleForm = {
        img: ''
      }
    },
    show() {
      this.$refs.dialog.show()
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleSuccess(response) {
      if (response.code === Err_OK) {
        this.ruleForm.img = response.data.file
      }
    },
    handleCloseDialog() {
      this.$emit('confirm', this.ruleForm)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/mixin.scss';
.dialog /deep/ .el-dialog{
  min-width: 530px;
  min-height: 380px;
}
</style>
